import type { ReactNode } from 'react'

import { NavBar } from 'antd-mobile'
import { useHistory } from 'umi'
import { LeftOutline } from 'antd-mobile-icons'

import styles from './index.module.less'

type Props = {
    title: string | ReactNode
    onBack?: () => void
}
export default (props: Props) => {
    const history = useHistory()

    const { onBack = () => history.goBack() } = props

    return window.__wxjs_environment !== 'miniprogram' ? (
        <NavBar
            style={{
                '--height': 'var(--adm-nav-bar-height)',
                background: '#fff',
            }}
            backArrow={<LeftOutline className={styles.leftOutLine} />}
            onBack={onBack}
        >
            <span className={styles.titleText}>{props.title}</span>
        </NavBar>
    ) : null
}
